<template>
  <v-sheet class="w-100 h-100" color="transparent" position="absolute">
    <tab-control-bar
      v-if="tabData"
      class="app-drag"
      :home-url="homeUrl"
      :is-collapsed="isCollapsed"
      :tab="tabData"
    />
    <PageLoadingOverlay
      class="sidebar-loading rounded-lg"
      :model-value="tabData?.nav.isLoading ?? false"
      :url="tabData?.url"
    />
  </v-sheet>
</template>

<script lang="ts" setup>
import { useSystemStateListener } from '@/composables/useSystemStateListener'
import { getUrlParam } from '~shared/utils/urlUtils'
import { layoutOn } from '@/utils/layoutEvent'

// 启动系统状态监听器
useSystemStateListener()

const webContentsId = Number(getUrlParam(window.location.href, 'webContentsId'))

const tabData = ref<F2.tab.Entity>(_pre_.tab.getData(webContentsId))
const homeUrl = ref(tabData.value.url)

layoutOn('separate:update', data => {
  if (tabData.value) {
    tabData.value = Object.assign(tabData.value, data)
  }
})

const width = ref(window.innerWidth)
window.addEventListener('resize', () => {
  width.value = window.innerWidth
})
const isCollapsed = computed(() => {
  return width.value < 350
})
</script>
<style scoped>
.sidebar-loading {
  margin: 32px 5px 5px 5px;
}
</style>
